<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.sid" clearable filterable class="filter-item" style="width: 120px;" placeholder="服务器">
        <el-option
          v-for="(item, index) in serverList"
          :key="index"
          :label="item.name"
          :value="item.sid"
        />
      </el-select>
      <el-input v-model="listQuery.actor" class="filter-item" placeholder="角色ID/角色名" style="width: 120px;"></el-input>
      <el-select v-model="listQuery.channel" filterable clearable class="filter-item" placeholder="频道">
        <el-option label="系统" value="1" />
        <el-option label="世界" value="2" />
        <el-option label="帮派" value="3" />
        <el-option label="私聊" value="4" />
      </el-select>
      <el-input v-model="listQuery.content" class="filter-item" placeholder="发言内容" style="width: 150px;"></el-input>
      <el-date-picker v-model="listQuery.datetime[0]" class="filter-item" type="date" style="width: 120px;" placeholder="开始时间"></el-date-picker>-
      <el-date-picker v-model="listQuery.datetime[1]" class="filter-item" type="date" style="width: 120px;" placeholder="结束时间"></el-date-picker>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      stripe
      highlight-current-row
      class="table-content"
      height="670"
    >
      <el-table-column label="服务器" align="center" prop="sname" width="80"></el-table-column>
      <el-table-column label="角色ID" align="center" prop="actor_id" width="120"></el-table-column>
      <el-table-column label="角色名" align="center" prop="actor_name" width="120"></el-table-column>
      <el-table-column label="等级" align="center" prop="level" width="50"></el-table-column>
      <el-table-column label="VIP" align="center" prop="vip" width="40"></el-table-column>
      <el-table-column label="充值金额" align="center" prop="amount" width="60"></el-table-column>
      <el-table-column label="IP" align="center" width="120" prop="ip"></el-table-column>
      <el-table-column label="频道" align="center" width="60">
        <template slot-scope="{row}">
          <el-tag v-if="row.channel === 1" type="success">系统</el-tag>
          <el-tag v-else-if="row.channel === 2" type="success">世界</el-tag>
          <el-tag v-else-if="row.channel === 3" type="primary">帮派</el-tag>
          <el-tag v-else type="warning">私聊</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发言内容" align="center" prop="content"></el-table-column>
      <el-table-column label="私聊目标" align="center" prop="target_str" width="160px"></el-table-column>
      <el-table-column label="发言时间" align="center" prop="chat_dt" width="140"></el-table-column>
      <el-table-column label="状态" align="center" width="70">
        <template slot-scope="{row}">
          <el-tag v-if="row.status === '1'" type="success">正常</el-tag>
          <el-tag v-else type="info">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="250">
        <template slot-scope="{row}">
          <el-button v-if="checkPermission(permissionRoles.del_chat)" type="text" size="small" title="删除发言" @click="deleteChat(row)">删除发言</el-button>
          <el-button v-if="checkPermission(permissionRoles.ban_chat)" type="text" size="small" title="禁言" @click="handleBanActor(row, 'chat')">禁言</el-button>
          <el-button v-if="checkPermission(permissionRoles.ban_actor)" type="text" size="small" title="封角色" @click="handleBanActor(row, 'actor')">封角色</el-button>
          <el-button v-if="checkPermission(permissionRoles.ban_account)" type="text" size="small" title="封账号" @click="handleBanAccount(row, 'account')">封账号</el-button>
          <el-button v-if="checkPermission(permissionRoles.ban_ip)" type="text" size="small" title="封IP" @click="handleBanAccount(row, 'ip')">封IP</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" :title="textMap[dialogType]" :close-on-click-modal="false">
      <el-form ref="dataForm" :model="dataForm" label-width="100px" label-position="left">
        <div class="warning"><p>您即将针对角色：<strong>{{ actor }}</strong>，进行<strong>{{ textMap[dialogType] }}</strong>操作</p></div>
        <el-form-item label="封禁时间(分)" prop="bantime" style="">
          <el-input v-model="dataForm.bantime" class="defaut-input" placeholder="请输入时间 单位：分钟" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dataForm.remark" class="defaut-input" placeholder="备注" />
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmBanActor()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleDel" title="删除发言" :close-on-click-modal="false">
      <el-form ref="delForm" :model="dataForm" label-width="120px" label-position="left">
        <div class="warning"><p>你将删除角色：<strong>{{ actor }}</strong> 的发言记录：<strong>{{ chat }}</strong></p></div>
        <el-form-item label="请选择删除类型" prop="type">
          <el-radio v-model="dataForm.type" label="1">全部</el-radio>
          <el-radio v-model="dataForm.type" label="2">单条</el-radio>
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="dialogVisibleDel=false">取消</el-button>
        <el-button type="primary" @click="confirmDeleteChat()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleBan" :title="banTextMap[banDialogType]" :close-on-click-modal="false">
      <el-form ref="banForm" :model="dataForm" label-width="120px" label-position="left">
        <div class="warning"><p>您即将针对角色：<strong>{{ actor }}</strong>，进行<strong>{{ banTextMap[banDialogType] }}</strong>操作 <strong>{{ dataForm.ip }}</strong> </p></div>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dataForm.remark" class="defaut-input" placeholder="备注" />
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="dialogVisibleBan=false">取消</el-button>
        <el-button type="primary" @click="confirmBanAccount()">确定</el-button>
      </div>
    </el-dialog>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>

import { getChatList, clearChat, banActor, banAccount, getLastIp } from '@/api/chat'
import waves from '@/directive/waves' // 实现点击波浪纹
import Pagination from '@/components/Pagination'
import checkPermission from '@/utils/permission'
import { getServerList } from '@/api/ops'

export default {
  name: 'ChatLog',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      tableKey: 0,
      list: [],
      serverList: [],
      total: 0,
      listLoading: true,
      fileList: [],
      listQuery: {
        sid: '',
        actor: '',
        content: '',
        channel: '',
        datetime: [],
        page: 1,
        limit: 200
      },
      dataForm: {
        id: '',
        sid: '',
        cpid: '',
        cid: '',
        account: '',
        actorId: '',
        actorName: '',
        remark: '',
        bantime: '',
        ip: '',
        type: ''
      },
      clearObj: {
        channel: '',
        targeId: '',
        chatId: ''
      },
      dialogVisible: false,
      dialogVisibleDel: false,
      dialogVisibleBan: false,
      dialogType: 'actor',
      textMap: {
        actor: '封角色',
        chat: '禁言'
      },
      banDialogType: 'account',
      banTextMap: {
        account: '封账号',
        ip: '封IP'
      },
      chatId: '',
      remark: '',
      actor: '',
      chat: ''
    }
  },
  mounted() {
  },
  created() {
    this.getList()
    this.getServerList()
  },
  methods: {
    checkPermission,
    async getList() {
      const query = this.listQuery
      this.listLoading = true
      const res = await getChatList(query)
      this.listLoading = false
      this.list = res.data.items
      this.total = res.data.total
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },

    async getServerList(params) {
      const query = params
      const res = await getServerList(query)
      this.serverList = res.data.items
      this.loading = false
    },

    handleFilter(query) {
      this.searchBarQuery = query
      this.getList()
    },

    handleBanActor(row, type) {
      this.dataForm = Object.assign({})
      this.dialogType = type
      this.dataForm.type = type
      this.dialogVisible = true
      this.dataForm.id = row.id
      this.dataForm.sid = row.sid
      this.dataForm.cpid = row.cpid
      this.dataForm.cid = row.cid
      this.dataForm.account = row.account
      this.dataForm.actorId = row.actor_id
      this.actor = row.actor_name
      this.dataForm.actorName = row.actor_name
    },
    confirmBanActor() {
      banActor(this.dataForm).then(response => {
        if (response.status) {
          this.dialogVisible = false
          this.getList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }
      })
    },
    deleteChat(row) {
      this.dialogVisibleDel = true
      this.actor = row.actor_name
      this.chat = row.content
      this.dataForm = Object.assign({}, this.dataForm)
      this.dataForm.account = row.account
      this.dataForm.type = '2'
      this.dataForm.id = row.id
      this.dataForm.actorId = row.actor_id
      this.dataForm.actorName = row.actor_name
      this.dataForm.content = row.content
      this.clearObj.channel = row.channel
      this.clearObj.targeId = row.target
      this.clearObj.chatId = row.chat_id
      this.dataForm.sid = row.sid
    },
    confirmDeleteChat() {
      clearChat(Object.assign(this.clearObj, this.dataForm)).then(response => {
        if (response.status) {
          this.dialogVisibleDel = false
          this.getList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }
      })
    },
    handleBanAccount(row, type) {
      this.banDialogType = type
      this.dialogVisibleBan = true
      this.dataForm = Object.assign({}, this.dataForm)
      this.dataForm.ip = ''
      this.dataForm.type = type
      this.dataForm.sid = row.sid
      this.dataForm.cpid = row.cpid
      this.dataForm.cid = row.cid
      this.dataForm.account = row.account
      this.dataForm.actorId = row.actor_id
      this.actor = row.actor_name
      this.dataForm.actorName = row.actor_name
      if (type === 'ip') {
        getLastIp(row.actor_id).then(response => {
          if (response.status) {
            this.dataForm.ip = response.data.last_login_ip
          }
        })
      }
    },
    confirmBanAccount() {
      banAccount(this.dataForm).then(response => {
        if (response.status) {
          this.dialogVisibleBan = false
          this.getList()
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .filter-container .filter-item {
    margin-right: 10px;
    margin-bottom: 0px;
  }

  .filter-container {
    margin-bottom: 10px;
  }

  .warning {
    padding: 8px 16px;
    background-color: #fff6f7;
    border-radius: 4px;
    border-left: 5px solid #fe6c6f;
    margin: 0 0 20px 0;
  }
</style>
